<template>
  <div class="header">
    <van-nav-bar title="一对一辅导" left-text="返回" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value" :options="option" />
      <van-dropdown-item title="选择老师条件" ref="item">
        <van-cell center title="包邮">
          <template #right-icon>
            <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
          </template>
        </van-cell>
        <van-cell center title="团购">
          <template #right-icon>
            <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
          </template>
        </van-cell>
        <div style="padding: 5px 16px;">
          <van-button type="danger" block round @click="onConfirm">确认</van-button>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="shen">
      <div class="div1">
        <van-image
          round
          width="50"
          height="50"
          lazy-load
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <em class="em">女 年教龄</em>
        <van-button round type="info">预约</van-button>
      </div>
      <div class="div2">
        <van-image
          round
          width="50"
          height="50"
          lazy-load
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <em class="em">女 年教龄</em>
        <van-button round type="info">预约</van-button>
      </div>
      <div class="div3">
        <van-image
          round
          width="50"
          height="50"
          lazy-load
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <em class="em">女 年教龄</em>
        <van-button round type="info">预约</van-button>
      </div>
      <div class="div4">
        <van-image
          round
          width="50"
          height="50"
          lazy-load
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <em class="em">女 年教龄</em>
        <van-button round type="info">预约</van-button>
      </div>
      <div class="foot">没有更多了</div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  // 组件状态值
  data() {
    return {
      value: 0,
      switch1: false,
      switch2: false,
      option: [
        { text: "选择上课时间", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
    };
  },
  // 生命周期
  mounted() {},
  // 组件方法
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
    onConfirm() {
      this.$refs.item.toggle();
    },
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 过滤器
  filters: {},
  // 自定义指令
  directives: {},
};
</script> 

<style scoped>
.div1,
.div2,
.div3,
.div4 {
  width: 95%;
  height: 70px;
  background: white;
  margin-bottom: 10px;
  margin-left: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.div1 {
  margin-top: 10px;
}
.header {
  width: 100%;
  height: 650px;
  background: #f2f3f5;
}
.shen {
  width: 100%;
  height: 100%;
  background: #f2f3f5;
}
.van-button {
  width: 80px;
  height: 25px;
  background: #ebeefe;
  color: #eb6100;
  font-size: 5px;
  margin-left: 143px;
  border: 0;
}
.van-image {
  margin-left: 10px;
}
.foot {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #969799;
}
</style>
